<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            text-align: center;
        }
        
        #wrap {
            width: 800px;
            height: 200px;
            border: solid;
            margin: auto;
        }
        
        #wrap ul {
            margin: 70px 236px 0;
            height: 65px;
            overflow: hidden;
        }
        
        #wrap ul li {
            list-style-type: none;
            float: left;
            width: 41px;
            height: 125px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <ul>
            <li class='on'>
                <img class='img' src="images/0.png" alt="">
                <img class='imgBot' src="images/0.png" alt="">
            </li>
            <li class='on'>
                <img class='img' src="images/0.png" alt="">
                <img class='imgBot' src="images/0.png" alt="">
            </li>
            <li>
                <img src="images/d.png" alt="" />
            </li>
            <li class='on'>
                <img class='img' src="images/0.png" alt="">
                <img class='imgBot' src="images/0.png" alt="">
            </li>
            <li class='on'>
                <img class='img' src="images/0.png" alt="">
                <img class='imgBot' src="images/0.png" alt="">
            </li>
            <li>
                <img src="images/d.png" alt="" />
            </li>
            <li class='on'>
                <img class='img' src="images/0.png" alt="">
                <img class='imgBot' src="images/0.png" alt="">
            </li>
            <li class='on'>
                <img class='img' src="images/0.png" alt="">
                <img class='imgBot' src="images/0.png" alt="">
            </li>
        </ul>
    </div>
    <script type="text/javascript" src='animation.js'></script>
    <script>
        //获取DOM元素
        var aImg = document.getElementsByClassName('img');
        var aImgBot = document.getElementsByClassName('imgBot');
        var aLi = document.getElementsByClassName('on');

        //定时器
        setInterval(function() {
            var now = new Date();
            var str = toTwo(now.getHours()) + toTwo(now.getMinutes()) + toTwo(now.getSeconds());
            now.setSeconds(now.getSeconds() + 1);
            var str1 = toTwo(now.getHours()) + toTwo(now.getMinutes()) + toTwo(now.getSeconds());
            for (var i = 0; i < str.length; i++) {
                aImg[i].src = 'images/' + str[i] + '.png';
            }
            for (var i = 0; i < str1.length; i++) {
                aImgBot[i].src = 'images/' + str1[i] + '.png';
            }
            for (var i = 0; i < aLi.length; i++) {
                if (str[i] != str1[i]) {
                    (function(i) {
                        animation(aLi[i], {
                            marginTop: -65
                        }, 0.5, function() {
                            this.style.marginTop = 0;
                            aImg[i].src = 'images/' + str1[i] + '.png';
                        })
                    })(i)
                }
            }
        }, 1000);

        function toTwo(num) {
            return num < 10 ? '0' + num : num + '';
        }
    </script>
</body>

</html>